<!doctype html>
<html class="no-js">
<head>
    <title>ZTE 中兴金融科技</title>
    {{include 'base/style.html'}}
    <link rel="stylesheet" href="{{=URL('static','assets/css/amazeui.tagsinput.css')}}">
<style>
  .am-form .am-tagsinput {
    min-width: 100%;
  }
  /*.am-u-sm-10 .twitter-typeahead{*/
    /*min-width: 100%;*/
  /*}*/
</style>

<style>
  .twitter-typeahead .tt-query,
  .twitter-typeahead .tt-hint {
    margin-bottom: 0;
  }

  .twitter-typeahead .tt-hint
  {
    display: none;
  }

  .tt-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
  }
  .tt-suggestion > p {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
    margin: 0;
  }
  .tt-suggestion > p:hover,
  .tt-suggestion > p:focus,
  .tt-suggestion.tt-cursor p {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
  }
</style>

</head>

<body>

    <div class=" am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 " >
            <div class="widget am-cf">

                    <form class="am-form am-form-horizontal">
                      <div class="am-form-group am-form-success am-form-icon am-form-feedback">
                        <label for="doc-ipt-3-a" class="am-u-sm-2 am-form-label">节点标签</label>
                        <div class="am-u-sm-10">
                            <input type="text" id="nodelabels" class="am-form-field" placeholder="输入节点标签">
                        </div>
                      </div>
                      <div class="am-form-group">
                        <div class="am-u-sm-10 am-u-sm-offset-2">
                          {{=labelsA}}
                        </div>
                      </div>
                      <div class="am-form-group am-form-warning am-form-icon am-form-feedback">
                        <label for="doc-ipt-3-a" class="am-u-sm-2 am-form-label">属性键值</label>
                        <div class="am-u-sm-10">
                          <input type="text" id="propertykeys"  placeholder="输入属性条件" >
                        </div>
                      </div>
                      <div class="am-form-group">
                        <div class="am-u-sm-10 am-u-sm-offset-2" id="prosA">
                          {{=prosA}}
                        </div>
                      </div>

                      <div class="am-form-group">
                        <div class="am-u-sm-10 am-u-sm-offset-2">

                            <div class="am-input-group">
                                <button id="queryNode" data-am-loading="{spinner: 'circle-o-notch', loadingText: '搜索中...', resetText: '搜索'}"  type="button" class="am-btn am-btn-primary am-btn-block">搜索</button>
                                <span class="am-input-group-label">
                                    <select data-am-selected="{btnWidth: '100%',btnSize: 'sm'}">
                                      <option value="50">50</option>
                                      <option value="100">100</option>
                                      <option value="500">500</option>
                                      <option value="1000">1000</option>
                                      <option value="2000">2000</option>
                                    </select>
                                </span>
                            </div>

                        </div>
                      </div>
                    </form>

                    <span class="am-badge am-badge-secondary" id="querytime"></span>
                    <span class="am-badge am-badge-success" id="graphtime"></span>

            </div>
        </div>
    </div>
    <div class=" am-cf" >
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg" >
            <div class="widget am-cf">
                <div class=" widget-body-md widget-body tpl-amendment-echarts am-fr" style="min-height: 722px;" id="tpl-echarts">

                </div>
            </div>
        </div>


{{include 'base/jsFile.html'}}
    <script src="{{=URL('static','assets/js/typeahead.js')}}?v2019"></script>
<script src="{{=URL('static','assets/js/amazeui.tagsinput.min.js')}}"></script>


<script>
 var arr=['am-badge am-badge-primary','am-badge am-badge-danger','am-badge am-badge-success','am-badge','am-badge am-badge-warning'];


$(function() {



    var pros=[{{for rows in pros:}} {name:' {{=rows}}'},{{pass}}]
    var propertykey = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: pros
//      prefetch: {
//        url: '{{=URL('static','assets/js/citynames.json')}}',
//        filter: function(list) {
//            alert(list);
//          return $.map(list, function(cityname) {
//            return { name: cityname }; });
//        }
//      }
    });
    propertykey.initialize();

    $('#propertykeys').tagsinput({
      typeaheadjs: {
        name: 'propertykey',
        displayKey: 'name',
        valueKey: 'name',
        source: propertykey.ttAdapter()
      },
      tagClass: function(item) {
          return arr[Math.floor(Math.random()*arr.length)];
      }
    });

    var labelss=[{{for rows in labels:}} {name:' {{=rows}}'},{{pass}}]
    var nodelabel = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: labelss
    });
    nodelabel.initialize();
//    $('#nodelabels').typeahead(null, {
//      displayKey: 'name',
//      source: nodelabel.ttAdapter()
//    });

    $('#nodelabels').tagsinput({
          typeaheadjs: {
            name: 'nodelabel',
            displayKey: 'name',
            valueKey: 'name',
            source: nodelabel.ttAdapter()
          },
          tagClass: function(item) {
//              var arr=['am-badge am-badge-primary','am-badge am-badge-danger','am-badge am-badge-success','am-badge','am-badge am-badge-warning'];
              return arr[Math.floor(Math.random()*arr.length)];
          }
        });




});
    var echartsA = echarts.init(document.getElementById('tpl-echarts'));

	$('#queryNode').click(function () {
       var nodelabels= $('#nodelabels').val();
       var propertykey = $('#propertykeys').val();

       if(nodelabels==''){
           alert("节点标签名不能为空");
           return;
       }
       var $btn = $(this)
       $btn.button('loading');
       data_param={"node":nodelabels, "property":propertykey,"num":$('select').val()}
        $.ajax({
            url:"{{=URL('admin','queryNodeResult.json')}}",
            type: "POST",
            data:JSON.stringify(data_param),
            headers:{
                "cube_user_token":"123token",
                "Content-Type":"application/json"
            },
            contentType: 'text/html; charset=UTF-8',
            dataType: "json",
            success: function(data) {
                setMap(data.data,data.time);
//               alert(JSON.stringify(data)); // Object
//                    if(data.id!=null){
//                        $('#my-alert-sc').modal();
//                    }else{
//                        $('#my-alert').modal();
//                    }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
    //            alert(XMLHttpRequest.status);
    //            alert(XMLHttpRequest.readyState);
                alert(errorThrown);
            },
            complete: function(XMLHttpRequest, textStatus) {
                $btn.button('reset');
            }

        });





    })

   function setMap(data,time) {
	    debugger;
//        data.forEach(function(value, index, array){
//        alert(value, index, array);
//})
       if(data.length==0){
           alert("没查询到数据");
           return;
       }
       var datas=[];
       var categorys=[]
       for(var i = 0 ; i < data.length; i++){
           data[i][0].category=i;
           if(!data[i][0].hasOwnProperty("id")){
               data[i][0].id=i;
           }
           datas.push(data[i][0]);
           categorys.push(i);
          }
        var start = new Date().getTime();
	    option = {
                            "title": {
                                "text": ""
                            },
                            "legend": [{
                                "data":[]
                            }],
                            "series": [{
                                "label": {
                                    "normal": {
                                        "show": true,
                                        "textStyle": {
                                            "fontSize": 12
                                        }
                                    }
                                },
                                "circular": {
                                    "rotateLabel": true
                                },
                                "focusNodeAdjacency": true,
                                "roam": true,
                                "top": 150,
                                "bottom": 80,
                                "data":  datas,
                                "links": [],
                                "layout": "force",  //force是力向图，circular是和弦图
                                "force": {
                                    "repulsion": 500,
                                    "edgeLength" :120,
                                },
                                "symbolSize": 55,
                                edgeSymbol: ['none', 'arrow'],
                                "edgeLabel": {
                                    "normal": {
                                        "show": true,
                                        "textStyle": {
                                            "fontSize": 11
                                        },
//                                        formatter: function(param) {
//
//                                            return param.data;
//                                        }
                                    }
                                },

                                "lineStyle": {
                                    "normal": {
                                        "width": 1,
                                        "curveness": 0.3,
                                        "opacity": 0.9
                                    }
                                },
                                "type": "graph",
                                "categories": categorys
                            }],
                            "animationEasingUpdate": "quinticInOut",
                            "tooltip": {
                                "formatter": function(param) {
//                                    if (param.dataType === 'edge') {
//                                        return param.data.category + ': ' + param.data.target;
//                                    }
                                    var s=""
                                    for(i in param.data){
                                        s=s+"<span class='"+arr[Math.floor(Math.random()*arr.length)]+"'>"+i+":"+param.data[i]+"</span></br>"
                                    }
//                                    return JSON.stringify(param.data);
                                    return s;
                                }
                            },
                            "animationDurationUpdate": 1500
                        };

            echartsA.setOption(option);
            var end = new Date().getTime();
            $('#querytime').text(time+"ms" );
            $('#graphtime').text((end-start)+"ms");
   }
  echartsA.on('dblclick', function (params) {
                console.log(params);//dataIndex data
                var options = echartsA.getOption();//获取已生成图形的Option
                var nodesOption = options.series[0].data;//获得所有节点的数组
                nodesOption.splice(params.dataIndex, 1);
                echartsA.setOption(options);
            });

	function test(obj) {
	    var name=obj.innerText
	    $('#nodelabels').tagsinput('removeAll');
        $('#nodelabels').tagsinput('add', name);

        $("#lpid span").each(function(){
            if(name==$(this).attr ("name")){
                $(this).show();
            }else{
                $(this).hide();
            }
    });

    }
</script>

</body>
</html>